<template>
  <div class="container">
    <el-form
      :model="addRuleForm"
      :rules="addRules"
      ref="addRuleRef"
      label-width="80px"
      class="demo-ruleForm"
    >
      <el-form-item label="文章标题" prop="title">
        <el-input v-model="addRuleForm.title"></el-input>
      </el-form-item>
      <el-form-item label="文章内容" prop="content">
        <quill-editor
          ref="myTextEditor"
          v-model="addRuleForm.content"
          :options="editorOption"
          style="height:220px;"
        ></quill-editor>
      </el-form-item>
      <el-form-item label="视频地址" class="formItem" prop="url">
        <el-input v-model="addRuleForm.url"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('close')">取 消</el-button>
      <el-button type="primary" @click="addDialog">确 定</el-button>
    </span>
  </div>
</template>

<script>
import { add } from '@/api/hmmm/articles'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
export default {
  components: {
    quillEditor
  },
  data() {
    return {
      addRuleForm: {
        title: '',
        content: '',
        url: ''
      },
      // allArticles: [],
      addRules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        content: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ],
        url: [
          {
            pattern: /((http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?)/,
            message: '请输入正确网址',
            trigger: 'blur'
          }
        ]
      },

      editorOption: {
        placeholder: '编辑文章内容'
      }
    }
  },
  created() {
    this.getAllArticles()
  },
  methods: {
    addDialog() {
      this.$emit('close')
      this.$refs.addRuleRef.validate(async valid => {
        if (!valid) {
          return this.$message.error('文本内容不能为空')
        }

        const data = await add({
          title: this.addRuleForm.title,
          articleBody: this.addRuleForm.content,
          videoURL: this.addRuleForm.url
        })
        console.log(data)
      })
      this.$emit('update')
      this.$refs.addRuleRef.resetFields()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.formItem {
  padding-top: 90px;
}

.dialog-footer {
  margin-left: 300px;
}
</style>
